<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交互式单词学习卡</title>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        /* 保持原有样式不变 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            min-height: 100vh;
            padding: 2rem 1rem;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 2.5rem;
            padding: 2rem;
            background: white;
            border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
            position: relative;
            overflow: hidden;
        }

        header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #4f46e5, #0ea5e9, #10b981);
        }

        h1 {
            color: #1e293b;
            font-size: 2.5rem;
            margin-bottom: 0.75rem;
            font-weight: 800;
            letter-spacing: -0.5px;
        }

        .subtitle {
            color: #64748b;
            font-weight: 500;
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 1.2rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }

        .control-btn {
            background: linear-gradient(90deg, #4f46e5, #7c3aed);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            box-shadow: 0 4px 15px rgba(79, 70, 229, 0.2);
        }

        .control-btn:hover {
            background: linear-gradient(90deg, #4338ca, #6d28d9);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
        }

        .control-btn:active {
            transform: translateY(-1px);
        }

        .control-btn.zh-btn {
            background: linear-gradient(90deg, #10b981, #0d9488);
        }

        .control-btn.zh-btn:hover {
            background: linear-gradient(90deg, #059669, #0f766e);
            box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
        }

        .word-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
        }

        .translatable {
            background: white;
            border-radius: 14px;
            padding: 2rem 1.5rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
            position: relative;
            overflow: hidden;
            font-size: 1.5rem;
            font-weight: 700;
            color: #1e293b;
            border: 1px solid rgba(0, 0, 0, 0.03);
        }

        .translatable::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #4f46e5, #0ea5e9);
            transform: scaleX(0);
            transition: transform 0.4s ease;
            transform-origin: left;
        }

        .translatable:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(79, 70, 229, 0.15);
        }

        .translatable:hover::before {
            transform: scaleX(1);
        }

        .translatable:active {
            transform: translateY(-4px);
        }

        .translatable.zh {
            color: #0d9488;
        }

        .tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%) scale(0.9);
            background-color: #1e293b;
            color: white;
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            font-size: 0.95rem;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .translatable:hover .tooltip {
            opacity: 1;
            transform: translateX(-50%) scale(1);
        }

        .tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 6px;
            border-style: solid;
            border-color: #1e293b transparent transparent transparent;
        }

        @media (max-width: 768px) {
            .word-grid {
                grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
                gap: 1.5rem;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .translatable {
                padding: 1.5rem 1rem;
                font-size: 1.3rem;
            }
        }

        @media (max-width: 480px) {
            .word-grid {
                grid-template-columns: 1fr;
            }
            
            .controls {
                flex-direction: column;
                align-items: center;
            }
            
            .control-btn {
                width: 80%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>英语单词学习卡</h1>
            <p class="subtitle">点击单词切换中英文显示</p>
            <div class="controls">
                <button class="control-btn en-btn" id="showAllEn">
                    <i class="fa fa-language"></i> 全部显示英文
                </button>
                <button class="control-btn zh-btn" id="showAllZh">
                    <i class="fa fa-font"></i> 全部显示中文
                </button>
            </div>
        </header>

        <div class="word-grid">
            <div class="translatable" data-en="piercing" data-zh="锐利的,逼人的">piercing<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="pierce" data-zh="穿透,刺穿,看穿">pierce<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="shiver" data-zh="哆嗦,发抖">shiver<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="earring" data-zh="耳环,耳饰">earring<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="pearl" data-zh="珍珠">pearl<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="necklace" data-zh="项链">necklace<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="jewel" data-zh="宝石,珠宝">jewel<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="silver" data-zh="银,银色">silver<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="valuable" data-zh="有价值的,贵重的,值钱的">valuable<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="jewellery" data-zh="珠宝,首饰">jewellery<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="underware" data-zh="内衣">underware<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="boot" data-zh="靴子,汽车后备箱,启动计算机">boot<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="belt" data-zh="腰带,皮带">belt<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="sweater" data-zh="毛衣">sweater<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="tailor" data-zh="裁缝">tailor<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="shoelaces" data-zh="鞋带">shoelaces<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="stripe" data-zh="条纹">stripe<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="curry" data-zh="咖喱">curry<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="formal" data-zh="正式的">formal<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="undo" data-zh="打开,解开,撤销">undo<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="linen" data-zh="亚麻布">linen<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="durable" data-zh="耐用的">durable<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="synthetic" data-zh="人造的,合成的">synthetic<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="leather" data-zh="皮革">leather<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="fibre" data-zh="纤维">fibre<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="cotton" data-zh="棉花">cotton<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="wool" data-zh="羊毛,毛线">wool<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="thick" data-zh="厚的">thick<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="thin" data-zh="瘦的">thin<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="spicy" data-zh="辣的">spicy<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="marvellous" data-zh="绝妙的,非凡的">marvellous<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="fantastic" data-zh="极好的,了不起的">fantastic<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="mild" data-zh="温和的">mild<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="tasty" data-zh="美味的">tasty<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="disgusting" data-zh="令人反感的">disgusting<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="flavour" data-zh="味道,特色">flavour<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="leftover" data-zh="残羹剩饭">leftover<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="starter" data-zh="开胃小吃,启动器,发令员">starter<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="dessert" data-zh="饭后甜点">dessert<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="sip" data-zh="小口喝">sip<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="straw" data-zh="稻草,吸管">straw<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="picnic" data-zh="野餐">picnic<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="tray" data-zh="托盘">tray<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="bowl" data-zh="碗">bowl<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="dish" data-zh="盘子,碟子">dish<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="pot" data-zh="锅,壶,盆">pot<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="kettle" data-zh="水壶">kettle<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="lid" data-zh="眼皮,盖子">lid<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="bakery" data-zh="面包店">bakery<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="mash" data-zh="捣烂,捣碎食物">mash<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="pancake" data-zh="煎饼,薄饼">pancake<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="toss" data-zh="掷硬币">toss<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="sauce" data-zh="酱汁">sauce<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="peel" data-zh="剥皮,脱皮">peel<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="lamb" data-zh="羔羊,羔羊肉">lamb<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="rare" data-zh="稀少的,罕见的">rare<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="fry" data-zh="油炸">fry<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="boil" data-zh="煮沸">boil<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="ingredient" data-zh="配料">ingredient<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="recipe" data-zh="食谱">recipe<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="abuse" data-zh="滥用,虐待">abuse<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="addicted" data-zh="上瘾的">addicted<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="addict" data-zh="对..入迷的人">addict<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="processed" data-zh="处理">processed<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="bottle" data-zh="瓶子">bottle<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="bottled" data-zh="瓶装的">bottled<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="barrel" data-zh="桶">barrel<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="bitter" data-zh="苦的">bitter<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="chilli" data-zh="辣椒">chilli<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="vinegar" data-zh="醋">vinegar<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="garlic" data-zh="大蒜">garlic<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="mint" data-zh="薄荷">mint<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="gum" data-zh="口香糖">gum<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="pepper" data-zh="胡椒">pepper<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="spice" data-zh="香料">spice<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="diary" data-zh="日志，日程本">diary<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="dairy" data-zh="奶制品">dairy<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="jam" data-zh="果酱">jam<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="cheese" data-zh="奶酪">cheese<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="cream" data-zh="奶油">cream<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="preserve" data-zh="保护,维持">preserve<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="sour" data-zh="酸的,搜的">sour<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="toast" data-zh="烤面包片">toast<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="flour" data-zh="面粉">flour<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="cucumber" data-zh="黄瓜">cucumber<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="mushroom" data-zh="蘑菇">mushroom<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="onion" data-zh="洋葱">onion<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="lettuce" data-zh="生菜">lettuce<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="cabbage" data-zh="卷心菜">cabbage<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="potato" data-zh="土豆">potato<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="raspberry" data-zh="树莓">raspberry<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="crisp" data-zh="薯片,(食物)脆">crisp<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="chips" data-zh="薯条">chips<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="grapefruit" data-zh="西柚">grapefruit<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="canned" data-zh="罐装的(美)">canned<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="tinned" data-zh="罐装的">tinned<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="tin" data-zh="锡,给..镀锡">tin<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="encourage" data-zh="鼓励鼓舞">encourage<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="discourage" data-zh="阻止">discourage<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="urge" data-zh="催促,力劝">urge<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="approve" data-zh="同意,赞成">approve<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="achieve" data-zh="达成,实现">achieve<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="achievement" data-zh="成就,功绩">achievement<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="capable" data-zh="有能力的(表现优秀)">capable<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="competent" data-zh="有能力的,足以胜任的(基本能力)">competent<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="convincing" data-zh="令人信服的">convincing<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="act" data-zh="行为,行动,表演,扮演">act<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="convince" data-zh="使确信,使相信,说服">convince<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="appointment" data-zh="约定,预约,任命">appointment<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="bold" data-zh="大胆自信的,明显的">bold<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="bored" data-zh="无聊的">bored<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="moderate" data-zh="适度的,温和的">moderate<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="reserved" data-zh="含蓄的,v预定保留">reserved<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="wicked" data-zh="邪恶的">wicked<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="modest" data-zh="谦虚的">modest<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="direct" data-zh="直接的">direct<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="breeze" data-zh="微风,轻而易举的事">breeze<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="cruel" data-zh="残酷的,残忍的">cruel<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="stepmother" data-zh="后妈,继母">stepmother<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="sick" data-zh="生病的,恶心的">sick<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="openly" data-zh="公开地">openly<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="decent" data-zh="像样的,正派的">decent<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="charming" data-zh="迷人的,美丽的">charming<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="sting" data-zh="叮,蜇">sting<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="spoilt" data-zh="宠坏的">spoilt<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="charming" data-zh="迷人的">charming<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="optimistic" data-zh="乐观的">optimistic<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="suntan" data-zh="防晒的,n晒黑">suntan<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="greasy" data-zh="油腻的">greasy<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="reliable" data-zh="可信赖的,可依靠的">reliable<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="superior" data-zh="n上司,v更好的">superior<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="plain" data-zh="简单的,n平原">plain<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="determination" data-zh="决心,坚定">determination<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="careless" data-zh="粗心的,漫不经心的">careless<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="determined" data-zh="坚决的,坚定的">determined<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="broad" data-zh="宽阔的">broad<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="certain" data-zh="确定的,无疑的">certain<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="conscience" data-zh="良心,良知">conscience<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="desire" data-zh="渴望,欲望">desire<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="tendency" data-zh="倾向,趋势">tendency<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="tend" data-zh="趋向,照顾,照料">tend<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="image" data-zh="形象,印象,画像,图像">image<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="character" data-zh="性格,品质,角色,特点">character<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="remind" data-zh="提醒">remind<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="suppress" data-zh="抑制,压制,镇压">suppress<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="grass" data-zh="草坪,草">grass<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="negative" data-zh="消极的">negative<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="positive" data-zh="积极地">positive<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="prove" data-zh="证明">prove<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="conclusion" data-zh="结论">conclusion<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="conclude" data-zh="推断出,断定,得出结论">conclude<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="proof" data-zh="证明,证明">proof<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="suspect" data-zh="怀疑n嫌疑犯">suspect<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="arrest" data-zh="逮捕">arrest<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="determine" data-zh="决定,查明">determine<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="assume" data-zh="猜想,假定,认为">assume<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="suppose" data-zh="猜想,假定,认为">suppose<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="alternative" data-zh="可供选择的">alternative<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="judge" data-zh="法官,审判">judge<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="twist" data-zh="弯曲">twist<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="bend" data-zh="弯腰,弯曲">bend<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="strip" data-zh="除去,剥夺">strip<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="warp" data-zh="包裹,缠绕">warp<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="grasp" data-zh="抓紧,抓住(机会)">grasp<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="sensible" data-zh="明智的">sensible<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="motive" data-zh="动机,目的">motive<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="grab" data-zh="抓住(口语化)">grab<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="seize" data-zh="抓住,夺取,控制">seize<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="reality" data-zh="现实">reality<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="nonsense" data-zh="胡说,无意义的">nonsense<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="realize" data-zh="实现,理解,领会,意识到">realize<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="conscious" data-zh="意识到的,清醒的">conscious<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="aware" data-zh="意识到的">aware<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="imagination" data-zh="想像,创造力">imagination<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="island" data-zh="岛">island<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="roll" data-zh="翻转,滚动">roll<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="shift" data-zh="转移,挪动">shift<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="drag" data-zh="劝人,生拉硬拽">drag<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="mind" data-zh="心思,头脑n担心">mind<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="intelligence" data-zh="智能">intelligence<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="Artificial" data-zh="人造的人工的">Artificial<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="intend" data-zh="想要,打算">intend<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="concentrate" data-zh="全神贯注,集中,浓缩物">concentrate<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="regard" data-zh="看待,认为">regard<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="elevator" data-zh="电梯(美)">elevator<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="fetch" data-zh="去拿,去取">fetch<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="raise" data-zh="举起,筹集,抚养,提高">raise<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="slip" data-zh="v滑倒,溜走n滑">slip<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="sympathy" data-zh="同情">sympathy<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="respect" data-zh="尊敬">respect<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="give a sigh of relief" data-zh="松了一口气">give a sigh of relief<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="relieved" data-zh="感到慰的,放心的">relieved<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="impressive" data-zh="令人印象深刻的">impressive<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="appreciate" data-zh="欣赏,感激">appreciate<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="sigh" data-zh="叹气">sigh<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="blame" data-zh="责怪,归咎于">blame<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="temper" data-zh="脾气,情绪">temper<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="rage" data-zh="暴怒">rage<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="spot" data-zh="地点污点">spot<span class="tooltip">点击切换</span></div>
            <div class="translatable" data-en="prescribe" data-zh="开处方,开药">
                prescribe
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="prescription" data-zh="处方">
                prescription
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="recognize" data-zh="认出,辨认,意识到">
                recognize
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="filling" data-zh="馅,填充物">
                filling
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="remedy" data-zh="处理方法,疗法">
                remedy
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="annoying" data-zh="讨厌的,恼人的">
                annoying
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="disturb" data-zh="打扰">
                disturb
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="bother" data-zh="使烦恼">
                bother
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="regret" data-zh="后悔">
                regret
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="stitch" data-zh="突然剧痛，缝合">
                stitch
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="injection" data-zh="注射">
                injection
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="rub" data-zh="摩擦">
                rub
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="weep" data-zh="哭泣,流泪">
                weep
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="comfort" data-zh="舒服,安慰">
                comfort
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="grief" data-zh="悲伤">
                grief
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="desperate" data-zh="绝望的">
                desperate
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="mislead" data-zh="误导">
                mislead
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="satisfy" data-zh="使满意">
                satisfy
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="curious" data-zh="好奇的">
                curious
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="enthusiastic" data-zh="热情的">
                enthusiastic
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="exhausted" data-zh="筋疲力尽的">
                exhausted
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="prejudice" data-zh="偏见">
                prejudice
                <span class="tooltip">点击切换</span>
            </div>
            <div class="translatable" data-en="contempt" data-zh="轻蔑">
                contempt
                <span class="tooltip">点击切换</span>
            </div>
        </div>
    </div>

    <script>
        const elements = document.querySelectorAll('.translatable');
        
        // 初始化单词卡片
        elements.forEach(element => {
            // 初始状态为英文
            element.currentLang = 'en';
            
            // 单个单词切换功能
            element.onclick = function() {
                toggleSingleWord(this);
            };
        });

        // 单个单词切换逻辑
        function toggleSingleWord(element) {
            const en = element.dataset.en;
            const zh = element.dataset.zh;
            const tooltip = element.querySelector('.tooltip');
            
            if (element.currentLang === 'en') {
                // 切换到中文：只修改文本节点，保留tooltip元素
                element.childNodes[0].nodeValue = zh;
                element.currentLang = 'zh';
                element.classList.add('zh');
            } else {
                // 切换到英文：只修改文本节点，保留tooltip元素
                element.childNodes[0].nodeValue = en;
                element.currentLang = 'en';
                element.classList.remove('zh');
            }
        }

        // 全部显示中文
        document.getElementById('showAllZh').addEventListener('click', () => {
            elements.forEach(element => {
                if (element.currentLang !== 'zh') {
                    const zh = element.dataset.zh;
                    element.childNodes[0].nodeValue = zh;
                    element.currentLang = 'zh';
                    element.classList.add('zh');
                }
            });
        });

        // 全部显示英文
        document.getElementById('showAllEn').addEventListener('click', () => {
            elements.forEach(element => {
                if (element.currentLang !== 'en') {
                    const en = element.dataset.en;
                    element.childNodes[0].nodeValue = en;
                    element.currentLang = 'en';
                    element.classList.remove('zh');
                }
            });
        });
    </script>
</body>
</html>
